<template>
  <view class="pages index">
    <nav-bar :titleImg="ossDomain + '/title-logo.png'" titleSize='20' :backBtn='false'>
      <view slot="left" class="font-M font-11" style="color: rgba(0,0,0,0);">
        国家课题成果应用
      </view>
      <view slot="right" class="font-M font-11" style="color: #9FA0A0;">
        国家课题成果应用
      </view>
    </nav-bar>
    <scroll-view style="width: 100%;height: calc(100% - 50px);" scroll-y show-scrollbar>
      <view style="height: 12px;"></view>
      <kevy-swiper @click="swClick" @change='swChange' :list="banner" height="140px" />
      <view class="index-dot jh-flex-center">
        <block v-if="banner.length">
          <view v-for="(i,index) in banner" :key='index' :class="{active: menuList2[index].menu_id  == current}" class="index-dot-item"></view>
        </block>
      </view>
      <view class="index-hr padding-b30 margin-b10"></view>
      <view class="index-list jh-flex-center" v-for="(item,index) in menuList" :key='index'>
        <view class="index-list-item jh-flex-center jh-column" hover-class="tapItem" v-for="(i,index2) in item" :key='index2' @tap="$navigateTo(url2[i.url])">
          <image class="index-list-img" :src="i.icon"></image>
          <view class="font-12 c-00374D jh-line-height margin-t6 margin-b6">{{i.name}}</view>
          <view :class="{active: i.menu_id == current}" class="index-dot-item"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import kevySwiper from '@/components/kevy-swiper/kevy-swiper.vue'
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'home',
    data() {
      return {
        ossDomain: uni.ossDomain,
        banner: [],
        current: 0,
        url2: {
          "kangyangshenghuo": '/pages/index/kylife',
          "yufangjiance": '/pages/index/preventive',
          "yiliaokangfu": '/pages/index/medical',
          "manbingguanli": '/pages/index/chronic',
          "xuexizhonngguo": '/pages/index/learn-china',
          "jinronglicai": '/pages/index/financial',
          "lvyouxiuxian": '/pages/index/travel',
          "laoniandaxue": '/pages/index/university',
          "zhiqinhaoyou": '/pages/index/friend',
        },
      }
    },
    components: {
      kevySwiper
    },
    computed: {
      ...mapState({
        menuList2: state => {
          let item = state.global.menuList[1114]
          return item
        },
        menuList: state => {
          let item = state.global.menuList[1114]
          let f = item.slice().splice(0, 4)
          let l = item.slice().splice(4)
          return [f,l]
        },
      }),
    },
    mounted() {
      this.current = this.menuList2[0].menu_id
      this.$http.getAdsCode({code: 'app-index'}).then(res => {
        let banner = res.data.content.map(e => {
          if (e.source.indexOf('http') != 0) {
            e.source = 'http://' + e.source
          }
          return e.source
        })
        if (banner.length < 3) {
          banner = banner.concat(banner)
        }
        if (banner.length < 3) {
          banner = banner.concat(banner)
        }
        this.banner = banner
      })
    },
    methods: {
      swChange (i) {
        console.log(i);
        this.current = this.menuList2[i].menu_id
      },
      swClick(idx) {
        console.log(this.menuList);
        console.log(idx);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding-right: 30px;
    scroll-view {
      ::-webkit-scrollbar
      {
        width: 0px!important;
        height: 0px!important;
      }
      /*定义滑块*/
      ::-webkit-scrollbar-thumb
      {
        border-radius: 0px;
        background-color: rgba($color: #000000, $alpha: .2);
      }
    }
  }
  .index{
    &-dot{
      margin: 8px 0;
      &-item{
        margin: 0 3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #9FA0A0;
        &.active{
          background-color: #00374D;
        }
      }
    }
    &-hr{
      width: 100%;
      height: 1px;
      background-color: rgba(170, 167, 167, .5);
    }
    &-list{
      height: calc(50vh - 29px);
      width: 100%;
      &-item{
        margin: 0 9px;
        height: 156px;
        &.tapItem{
          filter: invert(10%);
        }
      }
      &-img{
        width: 88px;
        height: 88px;
        display: block;
      }
    }
  }
</style>
